/**
 * [vuex支持ts](https://next.vuex.vuejs.org/guide/typescript-support.html)
 * [vue3支持ts](https://v3.vuejs.org/guide/typescript-support.html#typing-reactive)
 */
import { InjectionKey } from 'vue';
import { createStore, useStore as baseUseStore, Store } from 'vuex';

interface IState {
  [key: string]: any;
}

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.ts$/);

// 自动导入modules文件中的所有vuex模块
const modules = modulesFiles
  .keys()// ["./permission.ts"]
  .reduce((previousValue: { [key: string]: any }, currentValue) => {
    const moduleName = currentValue.replace(/^\.\/(.*)\.\w+$/, '$1');// set './app.js' => 'app'
    const value = modulesFiles(currentValue);
    // previousValue[moduleName] = value.default; 【报错： 函数参数赋值】
    return {
      ...previousValue,
      [moduleName]: value.default,
    };
  }, {});

/**
 * @title define injection key
 */
export const key: InjectionKey<Store<IState>> = Symbol('vuexStoreSymbol');

/**
 * @title 创建store
 */
export default createStore<IState>({
  // 自动导入的模块对象(模块化)
  modules,
  // 主store
  state: {

  },
  mutations: {},
  actions: {},
});

/**
 * @title 重写`useStore`方法
 * define your own `useStore` composition function
 * 必須InjectionKey將其導入並將其傳遞到useStore使用過的任何地方,因此在这里统一传入
 */
export function useStore() {
  return baseUseStore(key);
}
